<template>
  <div class="">
    <el-dialog
      title="场景执行日志"
      :visible.sync="dialogVisible"
      width="1200px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
    >
      <div class="common-container">
        <div class="header">
          <div class="header_left"></div>
          <div class="header_right">
            <el-button
              class="el_button"
              size="small"
              icon="el-icon-delete"
              type="primary"
              style="margin-left: 15px"
              @click="delClick"
              :disabled="total == 0"
            >
              刷新
            </el-button>
            <el-button
              class="el_button"
              size="small"
              icon="el-icon-delete"
              type="danger"
              style="margin-left: 15px"
              @click="delClick"
              :disabled="total == 0"
            >
              删除该规则所有日志
            </el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            :data="tableData"
            height="calc(100% - 65px)"
            class="table"
            :header-cell-style="headerStyle"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="80"
              height="30"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="success"
              label="执行结果"
              min-width="135"
            >
              <template slot-scope="scope">
                <el-tag type="success" size="mini" v-if="scope.row.success"
                  >成功</el-tag
                >
                <el-tag type="danger" size="mini" v-else>失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="content"
              label="详细信息"
              min-width="135"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="logAt"
              label="执行时间"
              min-width="135"
            >
              <template slot-scope="scope">
                {{ formatTime(scope.row.logAt) }}
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" min-width="140">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                                    <i @click="delClick(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
                                </el-tooltip>
                            </template>
                        </el-table-column> -->
          </el-table>
          <pagination
            :total="total"
            :page.sync="page"
            :limit.sync="limit"
            @pagination="getData"
            class="pagination"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reqRuleRuleLog, reqRuleRemoveLog } from "@api/rule.js";
import Pagination from "@components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";

export default {
  props: {
    logId: {
      type: String,
      default: "",
    },
  },
  components: {
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      total: 0, // 总条数
      page: 1,
      limit: 10,
      tableData: [],
      dialogVisible: false,
    };
  },
  computed: {},
  watch: {
    dialogVisible(e) {
      if (e) {
        this.searchButton();
      }
    },
  },
  methods: {
    // 时间格式化函数
    formatTime(time) {
      const date = new Date(time);
      return date.toLocaleString().replace(/\//g, "-"); // 替换斜杠为破折号 // 转换为本地时间字符串
    },
    // 删除
    async delClick() {
      const result = await this.$confirm(
        "此操作将永久删除该规则所有日志, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqRuleRemoveLog(this.logId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      this.searchButton();
    },
    // 点击查询
    async searchButton() {
      this.page = 1;
      this.limit = 10;
      // this.loadingSearch = true;
      await this.getData();
      // this.loadingSearch = false;
    },
    // 获取数据的方法
    async getData() {
      let res = await reqRuleRuleLog(this.page, this.limit, {
        ruleId: this.logId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows, total } = res.data;
      this.tableData = rows;
      this.total = total || 0;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
@import url("~@views/style/tablePage.less");

::v-deep .el-dialog__body {
  padding: 5px 20px;
  min-height: 70vh;
}

.common-container .content {
  height: 70vh;
}
</style>
